<template>
  <div>
      <div class="pd20">
        <div class="row-spaceb">
          <p class="fwbold fs-md">发布需求</p>
          <el-button type="primary" size="medium" plain @click="goBackList">返回</el-button>
        </div>
        <el-divider></el-divider>
        <el-steps :active="detailStep" class="mg30 ml80 mr80" align-center finish-status="success">
            <el-step title="需求描述"></el-step>
            <el-step title="等待审核"></el-step>
            <el-step title="完成发布"></el-step>
        </el-steps>
        <el-form :rules="serviceRules" ref="serviceForm" :model="serviceData" label-position="right" label-suffix=":" size="medium">
            <div class="row-start ml20">
                <div class="left-border"></div>
                <div class="ml5 fs16 fwbold">基本信息</div>
            </div>
            <el-row :gutter="20" class="mt20">
                <el-col :span="12">
                    <el-form-item label="需求名称" prop="requirement" label-width="150px">
                        <el-input placeholder="请输入需求名称" style="width: 85%;"
                                v-model="serviceData.requirement"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="需求分类" prop="requirementTypeId" label-width="150px">
                        <el-select clearable v-model="serviceData.requirementTypeId" placeholder="-请选择-" style="width: 85%;">
                        <el-option v-for="(item) in serviceTypeData" :key="item.index" :value="item.productTypeId"
                                    :label="item.productTypeName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" label-width="150px">
                        <el-input disabled placeholder="请输入联系电话" style="width: 85%;"
                                v-model="userInfo.userPhoneNum"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="需求企业"  label-width="150px">
                        <el-input disabled placeholder="请输入需求企业" style="width: 85%;"
                                v-model="userInfo.companyName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="预算金额(元)" prop="servicePrice" label-width="150px">
                        <el-radio-group v-model="serviceData.needQuote" @input="controlInput">
                            <el-radio :label="1">需要服务商报价</el-radio>
                            <el-radio :label="0">我有明确预算</el-radio>
                        </el-radio-group>
                        <el-input-number :disabled="disabledFlag" class="ml50" v-model="serviceData.budget" controls-position="right" :min="0" :max="100000000000" :precision="0" :step="100" style="width: 40%;"></el-input-number> 元
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="row-start ml20 mt10">
            <div class="left-border"></div>
            <div class="ml5 fs16 fwbold">需求内容</div>
        </div>
        <div class="mt20 ml20">
          <el-input type="textarea" :rows="5" placeholder="请输入需求内容" v-model="serviceData.requirementDesc" maxlength="300" show-word-limit></el-input>
        </div>
        <div class="mt20 tc">
          <el-button :loading="applyBtnLoading"  @click="saveOrApplyReq" type="primary" size="medium">申请发布需求</el-button>
        </div>
      </div>
  </div>
</template>
<script>
import {getProductTypeList, requirementPublish,requirementDetailPrivate,requirementEdit } from "@/api/homeApi";
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      formLoading: false,
      applyBtnLoading:false,
      serviceTypeData: [],
      serviceData: {
        requirement: '',
        requirementTypeId: '',
        requirementDesc: '',
        needQuote: 1,
        budget: 0,
        status: 0
      },
      serviceRules: {
        requirement: [{required: true, message: '请输入需求名称', trigger: 'blur'}],
        requirementTypeId: [{required: true, message: '请选择需求类型', trigger: 'change'}],
        needQuote: [{required: true, message: '请选择预算金额', trigger: 'blur'}],
      },
      detailStep: 0,
      radio:0,
      disabledFlag: true
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
  },
  mounted() {
    this.getProductType()
    // 如果路由参数带id，说明是编辑需求
    if (this.$route.query.id) {
      this.getRequirementDetail(this.$route.query.id)
    }
  },
  methods: {
    getRequirementDetail(id) {
      requirementDetailPrivate({requirementId:id}).then(res => {
        if (res.code === 200) {
          this.serviceData = res.data
          this.serviceData.needQuote = this.serviceData.budget > 0 ? 0 : 1
          this.disabledFlag = this.serviceData.needQuote === 1
        }
      })
    },
    controlInput(){
      if(this.serviceData.needQuote == 1){
        this.disabledFlag = true
      }else{
        this.disabledFlag = false
      }
    },
    goBackList() {
      this.$router.push({name: '我的需求管理'})
    },
    getProductType() {
      getProductTypeList().then(res => {
        if (res.code === 200) {
          this.serviceTypeData = [...res.data]
        }
      })
    },
    // 产品暂存或者上架
    saveOrApplyReq() {
      this.$refs['serviceForm'].validate(valid => {
        if (valid) {
          if(this.serviceData.status === 2){
            this.applyBtnLoading = true
             requirementEdit(this.serviceData).then(res => {
            if (res.code == 200) {
              this.$message.success('需求发布成功')
              this.$router.push({name:'需求详情', query: {id: res.data}})
            }
            }).finally(() => {
              this.applyBtnLoading = false
            })
          } else {
            this.applyBtnLoading = true
            requirementPublish(this.serviceData).then(res => {
              if (res.code == 200) {
                this.$message.success('需求发布成功')
                this.$router.push({name:'需求详情', query: {id: res.data}})
              }
            }).finally(() => {
              this.applyBtnLoading = false
            })
        }
        }
      })
    },
  }
}
</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
}

.submit_box {
  margin-top: 42px;
  width: 100%;
  text-align: center;
}
.left-border{
    border-left: 3px solid #436AF7;
}
</style>
